<template>
  <TabGrayEasyCard title="费控对标" @onMore="jumpDetailPage" :tabs="card.tabs" :curTab="card.curTab"
    :tabRight="card.tabRight" :grayCardList="card.grayCardList" :unitText="card.unitText" @onChange="queryList"
    v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
      <hsPageTable 
        :stripe="false"
        :isHaveIndex="false"
        :isHavePage="false"
        :tableData="tableData.data"
        :cloumns="tableData.columns"
      />
  </TabGrayEasyCard>
</template>

<script setup lang="jsx">
import descriptionImg from "@/assets/description.png";
// 测试
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import dashBoardApi from '@/api/Manage/Business/dashBoard';
import { formatArea } from '@/utils/publicUtils'
import { reportLog } from '@/utils/reportLog'
import { reactive, watch, computed } from 'vue'
import { useRouter, useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()
let {tabPermi, bizType} = route.query

const props = defineProps({
  permi: {
    type: String,
    required: false,
    default: ''
  },
  hideList: {
    type: Array,
    required: false,
  },
  biProjectCode: {
    type: String,
    required: true,
    default: ''
  },
  projectCode: {
    type: String,
    required: true,
    default: ''
  },
  updateDate: {
    type: String,
    required: false,
    default: ''
  }
})

let card = reactive({
  tabs: [{ label: '累计', value: '累计' }],
  curTab: '累计',
  tabRight: '',
  unitText: props.biProjectCode == 'BJ_HSH_XYH' || props.biProjectCode == 'GZ_RBXM' ? '（EBITDA已剔除业主租金）' : '', // 北京木樨园合生广场 广州海珠智汇科技园
  curDate:'',
  grayCardList:[
    { label: '标准EBITDA率', value: '', unit: '%', color: ''},
    { label: '实际EBITDA率', value: '', unit: '%', color: ''},
    { label: '达成率', value: '', unit: '%', color: ''},
  ]
})

let tableData = reactive({
  data:[],
  columns:[
    {prop:'subjectName',label:'科目',align:'left', type:'html', minWidth:'95', render:({row})=>{
      return <div>
        <span>{ row.subjectName }</span>
        <ElTooltip placement="right" effect="light">
          {{
            content: () => {
              {/* return <div>{curMsg[rowData.subjectName].msg}</div> */}
              return <div v-html={row.suInformation || '未配置'}></div>
            },
            default: () => <img class="img-icon" src={descriptionImg} alt="加载失败" />
          }}
        </ElTooltip>
      </div>
    }},
    {prop:'standardData',label:'标准',align:'right', type:'html', render: ({row},empty)=> rowRender(row,empty,'standardData')},
    {prop:'actualData',label:'实际',align:'right',type:'html', render: ({row},empty)=> rowRender(row,empty,'actualData')},
    {prop:'achievingRate',label:'达成率',align:'right',type:'html', render: ({row},empty)=> rowRender(row,empty,'achievingRate')},
    {prop:'conclusion',label:'结论',align:'center',type:'html', render: ({row},empty)=> rowRender(row,empty,'conclusion') },
  ]
})

function rowRender(row,empty,key) {
  if (!row[key] && row[key] !== 0) return <span>{empty}</span>
  if (key == 'conclusion') return row[key] == 1 ? <span class='zs-text-green'>合格</span> : <span class='zs-text-red'>不合格</span> 
  let curVal = formatArea(row[key])
  if (key == 'achievingRate') {
    curVal = curVal + '%'
  }
  return <span>{curVal}</span>
}


function queryList() {
  dashBoardApi.queryCostControlStandardListApi({biProjectCode:props.biProjectCode, bizType}).then(res=>{
    let resData = res.data
    if(resData.code == 200){
      let dateArr = resData.data[0].rightTime.split('-')
      card.tabRight = `${dateArr[0].slice(2)}-01~${dateArr[0].slice(2)}-${dateArr[1]}`
      card.curDate = resData.data[0].rightTime
      let EBITDA = false
      for(let i = resData.data.length - 1; i>=0; i--){
        if (resData.data[i].subjectName === 'EBITDA率') {
          EBITDA = resData.data[i]
          resData.data.splice(i,1)
        }
      }
      card.grayCardList[0].value = EBITDA?.standardData || '-'
      card.grayCardList[1].value = EBITDA?.actualData || '-'
      card.grayCardList[2].value = EBITDA?.achievingRate || '-'
      tableData.data = resData.data
    }
  })
}
queryList()


function jumpDetailPage () {
  reportLog({
    type: 4,
    resourceKey: props.permi,
  })
  // 跳转两算一控的下钻页
  router.push({
    path: '/page/routeController/index',
    query: {
      rid: 'page_cockpit_costcontrol_detail_list',
      rTitle: '费控明细',
      biProjectCode: props.biProjectCode,
      projectCode: props.projectCode,
      updateDate: props.updateDate,
      tabPermi: tabPermi,
      curDate: card.curDate,
      bizType,
    },
  })
}

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    queryList()
}, { deep: true });

</script>

<style scoped lang="scss">
:deep(#my-table){
  height: 100%;
  .el-scrollbar__view{
    height: 100%;
  }
  .img-icon {
    position: relative;
    top: 3px;
    width: 14px;
    margin: 0 2px;
  }
  .el-table__inner-wrapper{
    &::before{
      z-index: -1;
    }
  }
}
</style>
